<template>
    <el-row :gutter="20">
        <el-col :span="8">
            <el-card class="box-card" style="height:800px" ref="unfinish">
                <div slot="header" class="clearfix" >
                    <h3>待处理</h3>
                </div>
                <el-scrollbar style="height:100%">
                    <el-card class="box-card-child" ref="bug" v-for="(item, index) in currentPageData1" :key="index">
                        <div class="container">
                            <h4 class="title">{{item.tasks_title}}</h4>
                            <h4 class="id">任务ID：{{item.tasks_id}}</h4>
                            <div class="content">
                                {{item.tasks_content}}
                            </div>
                            <div class="missonDetail">
                                <span>创建时间：{{item.tasks_createtime}}</span>
                            </div>
                        </div>
                        <el-row class="tags">
                            <el-tag class="tag" v-for="(val, index) in item.sign" :key="index">{{val}}</el-tag>
                        </el-row>
                        <el-row>
                            <el-button type="primary" class="btn"  @click="submitMission(item.tasks_id,item.tasks_status+1)">获取此任务</el-button>
                        </el-row>
                        <el-tag class="tsk-weight" type="info">任务权重：{{item.tasks_weight}}</el-tag>
                    </el-card>
                    <el-pagination
                        @current-change="currentChangeHandle1"
                        :current-page="pageIndex1"
                        :total="total1"
                        :pager-count="4"
                        :page-size="pageSize"
                        layout="total, prev, pager, next">
                    </el-pagination>
                </el-scrollbar>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card class="box-card" style="height:800px" ref="unfinish">
                <div slot="header" class="clearfix" >
                    <h3>进行中</h3>
                </div>
                <el-scrollbar style="height:100%">
                    <el-card class="box-card-child" ref="bug" v-for="(item, index) in currentPageData2" :key="index">
                        <div class="container">
                            <h4 class="title">{{item.tasks_title}}</h4>
                            <h4 class="id">任务ID：{{item.tasks_id}}</h4>
                            <div class="content">
                                {{item.tasks_content}}
                            </div>
                            <div class="missonDetail">
                                <span>获取时间：{{item.tasks_createtime}}</span>
                            </div>
                        </div>
                        <el-row class="tags">
                            <el-tag class="tag" v-for="(val, index) in item.sign" :key="index">{{val}}</el-tag>
                        </el-row>
                        <el-row>
                            <el-button type="primary" class="btn" @click="submitMission(item.tasks_id,item.tasks_status+1)">确认任务完成</el-button>
                        </el-row>
                        <el-tag class="tsk-weight" type="info">任务权重：{{item.tasks_weight}}</el-tag>
                    </el-card>
                    <el-pagination
                        @current-change="currentChangeHandle2"
                        :current-page="pageIndex2"
                        :total="total2"
                        :pager-count="4"
                        :page-size="pageSize"
                        layout="total, prev, pager, next">
                    </el-pagination>
                </el-scrollbar>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card class="box-card" style="height:800px" ref="unfinish">
                <div slot="header" class="clearfix" >
                    <h3>已完成</h3>
                </div>
                <el-scrollbar style="height:100%">
                    <el-card class="box-card-child" ref="bug" v-for="(item, index) in currentPageData3" :key="index">
                        <div class="container">
                            <h4 class="title">{{item.tasks_title}}</h4>
                            <h4 class="id">任务ID：{{item.tasks_id}}</h4>
                            <div class="content">
                                {{item.tasks_content}}
                            </div>
                            <div class="missonDetail">
                                <span>完成时间：{{item.tasks_createtime}}</span>
                            </div>
                        </div>
                        <el-row class="tags">
                            <el-tag class="tag" v-for="(val, index) in item.sign" :key="index">{{val}}</el-tag>
                        </el-row>
                        <el-tag class="tsk-weight" type="info">任务权重：{{item.tasks_weight}}</el-tag>
                    </el-card>
                    <el-pagination
                        @current-change="currentChangeHandle3"
                        :current-page="pageIndex3"
                        :pager-count="4"
                        :total="total3"
                        :page-size="pageSize"
                        layout="total, prev, pager, next">
                    </el-pagination>
                </el-scrollbar>
            </el-card>
        </el-col>
        <!-- <el-col :span="6">
            <el-card class="box-card" v-if="boxCardShow">
                <div class="text item" @click="newCardShow" v-if="newShow">
                    <i class="el-icon-circle-plus"></i>
                    新建任务列表
                </div>
                <el-row v-else>
                    <el-input v-model="input" type="text" placeholder="新建任务列表..."></el-input>
                    <el-row class="buttons">
                        <el-button @click="close">取消</el-button>
                        <el-button type="primary" @click="save">保存</el-button>
                    </el-row>
                </el-row>
            </el-card>
            <el-card class="box-card" style="height:800px" v-else>
                <div slot="header" class="clearfix">
                    <span>{{input}}</span>
                </div>
                <div v-for="o in 4" :key="o" class="text item">
                    {{'列表内容 ' + o }}
                </div>
            </el-card>
        </el-col> -->
    </el-row>
</template>
<script>
import axios from "axios";
const ERR_OK = 1;
function trim(s) {
  return s.replace(/(^\s*)|(\s*$)/g, "");
}
export default {
  data() {
    return {
      newShow: true,
      input: "",
      boxCardShow: true,
      taskStatus1: [],
      taskStatus2: [],
      taskStatus3: [],
      userData: [],
      // 每页条数
      pageSize: 5,
      // 待处理
      pageIndex1: 1,
      total1: 0,
      currentPageData1: [],
      para1: {
        tasks_status: 0,
        tasks_suid: ""
      },
      // 进行中
      pageIndex2: 1,
      total2: 0,
      currentPageData2: [],
      para2: {
        tasks_status: 1,
        tasks_suid: JSON.parse(localStorage.getItem("loginMsg")).huser_id
      },
      // 已完成
      pageIndex3: 1,
      total3: 0,
      currentPageData3: [],
      para3: {
        tasks_status: 2,
        tasks_suid: JSON.parse(localStorage.getItem("loginMsg")).huser_id
      },
      //滚动数据
      busy: true,
      page: 0,
      // 获取任务列表
      url: "api/tasks/index.html"
    };
  },
  computed: {
    getTaskData1() {
      return this.$apis.requestCurry(
        this.pageIndex1,
        this.pageSize,
        this.successCommon1,
        this.errorCommon,
        true
      );
    },
    getTaskData2() {
      return this.$apis.requestCurry(
        this.pageIndex2,
        this.pageSize,
        this.successCommon2,
        this.errorCommon,
        true
      );
    },
    getTaskData3() {
      return this.$apis.requestCurry(
        this.pageIndex3,
        this.pageSize,
        this.successCommon3,
        this.errorCommon,
        true
      );
    }
  },
  created() {
    this.$nextTick(() => {
      this.getTaskData1(this.url, this.para1);
      this.getTaskData2(this.url, this.para2);
      this.getTaskData3(this.url, this.para3);
    });
  },
  methods: {
    // 待处理正常请求
    successCommon1(res) {
      if (res.code === this.$apis.ERR_OK2) {
        this.total1 = res.data.total;
        this.currentPageData1 = res.data.list;
        // this.$notify({
        //   title: "提示",
        //   message: res.message,
        //   position: "top-left",
        //   type: "success"
        // });
      } else {
        this.$notify({
          title: "提示",
          message: res.message,
          position: "top-left",
          type: "error"
        });
      }
    },
    // 进行中正常请求
    successCommon2(res) {
      if (res.code === this.$apis.ERR_OK2) {
        this.total2 = res.data.total;
        this.currentPageData2 = res.data.list;
        // this.$notify({
        //   title: "提示",
        //   message: res.message,
        //   position: "top-left",
        //   type: "success"
        // });
      } else {
        this.$notify({
          title: "提示",
          message: res.message,
          position: "top-left",
          type: "error"
        });
      }
    },
    // 已完成正常请求
    successCommon3(res) {
      if (res.code === this.$apis.ERR_OK2) {
        this.total3 = res.data.total;
        this.currentPageData3 = res.data.list;
        // this.$notify({
        //   title: "提示",
        //   message: res.message,
        //   position: "top-left",
        //   type: "success"
        // });
      } else {
        this.$notify({
          title: "提示",
          message: res.message,
          position: "top-left",
          type: "error"
        });
      }
    },
    // 异常请求
    errorCommon(e) {
      return e;
    },
    //提交任务ID
    submitMission(id, status) {
      let that = this;
      let locale = {
        tasks_id: id,
        tasks_status: status,
        tasks_suid: JSON.parse(localStorage.getItem("loginMsg")).huser_id
      };
      const url = "api/tasks/tasksEdit.html";
      this.$confirm(`确定要变更任务进程?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios
            .post(url, locale)
            .then(res => {
              if (res.data.code === ERR_OK) {
                this.$notify({
                  title: "提示",
                  message: "任务状态已变更！",
                  position: "top-left"
                });
                that.getTaskData1(that.url, that.para1);
                that.getTaskData2(that.url, that.para2);
                that.getTaskData3(that.url, that.para3);
              }
            })
            .catch(e => {
              console.log(e);
            });
        })
        .catch(() => {});
    },
    // 当前页
    currentChangeHandle1(val) {
      this.pageIndex1 = val;
      this.getTaskData1(this.url, this.para1);
    },
    currentChangeHandle2(val) {
      this.pageIndex2 = val;
      this.getTaskData2(this.url, this.para2);
    },
    currentChangeHandle3(val) {
      this.pageIndex3 = val;
      this.getTaskData3(this.url, this.para3);
    },
    save() {
      this.boxCardShow = false;
    },
    close() {
      this.newShow = true;
    }
  }
};
</script>
<style lang="stylus" scoped rel="stylesheet/stylus">
.box-card {
  cursor: pointer;
  margin-top: 10px;
  overflow-y: scroll;

  .text:hover {
    color: blue;
  }

  .box-card-child {
    position: relative;
    margin-bottom: 15px;

    .container {
      padding-bottom: 20px;

      .title {
        padding-bottom: 5px;
        font-size: 20px;
      }

      .id {
        font-size: 14px;
      }

      .content {
        text-align: left;
        padding-bottom: 20px;
      }

      .missonDetail {
        font-size: 12;
      }
    }

    .tags {
      padding-bottom: 15px;

      .tag {
        margin-right: 6px;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .tsk-weight {
      position: absolute;
      right: 10px;
      top: 10px;
    }
  }

  .buttons {
    margin-top: 5px;
  }
}
</style>
